$(function () {
  $('#night').click(function () {
    changeTheme('#161618', '#f2555a', '#28282c', '#fff', '#34343a')
    $('#night').css({ display: 'none' })
    $('#morning').css({ display: 'block' })
  })

  $('#morning').click(function () {
    changeTheme('#fff', '#dc3d43', '#eeedef', '#000', '#e4e2e4')
    $('#morning').css({ display: 'none' })
    $('#night').css({ display: 'block' })
  })

  // 改变主题
  function changeTheme(bgColor, btnColor, tinyBtnColor, textColor, divingColor) {
    less.modifyVars({
      '@background-color': bgColor,
      '@btn-changeColor': btnColor,
      '@tiny-btn-changeColor': tinyBtnColor,
      '@text-color': textColor,
      '@diving-color': divingColor
    })
  }

  $('.nav-list').click(function (event) {
    // 使用事件的捕获机制,将事件的挂载到父元素上
    if (Array.from($('.nav-list>li')).includes(event.target)) {
      changeFirstNav(event.target)
    }
  })
  // 改变一级导航项的
  function changeFirstNav(target) {
    // 1.获取到选中的目标对象,改变其背景颜色
    $(target).addClass('nav-change')
  }
})
